<template>
    <smart-page>
        <template #actions>

            <a-button v-auth="Acl.WIKI_DOC_STRATEGY_ADD" type="primary" @click="editCtr.open()">新建攻略短文</a-button>
        </template>
        <template #search>
            <smart-search :query-array="STRATEGY_SEARCH" @on-handler="onSearch"/>
        </template>
        <a-row :gutter="[12,12]">

            <a-col :span="6" v-for=" (row , index ) in dataSource" :key="index">

                <a-card hoverable :style="{ width: '100%' }" :body-style="{padding:'6px'}">
                    <template #cover>
                        <a-image :fit="'cover'" width='100%' preview :src="row.banner" :height="200"/>
                    </template>
                    <a-card-meta :title="row.title"
                    >
                        <template #description>
                            <a-space class="mx">
                                <a-tag color="red">所属分类: {{ row.kindDecode.label }}</a-tag>
                                <a-tag color="green">阅读次数：{{ row.readCount }}</a-tag>
                                <a-tag color="cyan">显示排序值:{{ row.sort }}</a-tag>
                            </a-space>
                            <a-space class="btn">
                                <a-button size="mini" status="success" @click="readCtr.open(row)">预览</a-button>
                                <a-button v-auth="Acl.WIKI_DOC_STRATEGY_UPDATE" size="mini" status="normal" @click="editCtr.open(row)">编辑</a-button>
                                <a-button v-auth="Acl.WIKI_DOC_STRATEGY_DELETE" size="mini" status="danger" @click="onDelete(row)">删除</a-button>
                            </a-space>


                        </template>
                    </a-card-meta>


                </a-card>
            </a-col>


        </a-row>


        <edit-modal v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
        <read-modal v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>
    </smart-page>
</template>
<script lang="ts" setup name="wiki-doc-agreement">
import {onMounted} from 'vue';

import {STRATEGY_SEARCH} from '../resource/search'

import {TablePage} from "@/libs/core";
import {SystemHttp} from "../resource/http";
import EditModal from './edit.vue'
import ReadModal from './read.vue'
import {Acl} from "@/libs/acl";

const pageConfig = {title: '攻略', rowKey: 'id', nameKey: 'title'}
const {getStrategyPage, delStrategy} = SystemHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getStrategyPage).setDeleteXhr(delStrategy).setPermission(Acl.WIKI_DOC_STRATEGY_PAGE_LIST);
const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys, editCtr, readCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onDelete, onSearch} = tablePage
onMounted(() => onFetch())
</script>

<style lang="less" scoped>
.mx {
  width: 100%;
  text-align: left;
  margin-bottom: 12px;
}

.btn {
  width: 100%;

}

</style>